
<template>
    <div>
        <city-header></city-header>
        <Search></Search>
        <List :cities = "cities" :hot= "hotCities" :letter="letter"></List>
        <Alphabet :cities = "cities" @change="handleLetterChange"></Alphabet>
        
    </div>
</template>

<script>
    import  CityHeader   from "../components/city/CityHeader.vue"
    import  Search   from "../components/city/Search.vue"
    import  List   from "../components/city/List.vue"
    import  Alphabet   from "../components/city/Alphabet.vue"
    export default {
        name:"City",
        components:{
            CityHeader,
            Search,
            List,
            Alphabet
        },
        data(){
            return {
                cities:{},
                hotCities:[],
                letter:"",
            }
        },
        methods:{
            getCityInfo(){
                this.$http.get('/api/city.json')
                .then(this.handleGetCityInfoSucc)
            },
            handleGetCityInfoSucc(res){
                res = res.data
                // console.log(res.data);
                if (res.ret && res.data) {
                    const data = res.data
                    this.cities = data.cities
                    this.hotCities = data.hotCities    
                }
            },
            handleLetterChange(val){
                // console.log(val)
                this.letter = val;
            }
        },
        mounted(){
            this.getCityInfo();
        }
    }
</script>

<style lang="stylus" scoped>

</style>